<template>
  <div class="shop-index">
    <!-- 轮播图 -->
    <banner v-if="banners && banners.length > 0"
            :banners="banners"></banner>
    <!-- 导航键 -->
    <index-nav v-if="navs && navs.length > 0"
               :navs="navs"></index-nav>

    <!-- 广告位 -->
    <!-- <div class="img-ad"
         v-if="floor_ads && floor_ads.length>0">
      <a v-for="(item,index) in floor_ads"
         :key="'floor_ad_'+index"
         :href="item.adv_link"
         style="display:block;">
        <img v-lazy="item.adv_code" />
      </a>
    </div> -->

    <div class="store-list-index"
         v-if="hot_products && hot_products.length > 0">
      <div class="title flex align-center justify-between">
        <h2 class="main-title">热门推荐</h2>
      </div>
      <goods-module module-name="goods2n"
                    goodsImg="goods_img"
                    goodsName="goods_name"
                    goodsPrice="goods_price"
                    delPrice="goods_marketprice"
                    goodsId="goods_id"
                    :list="hot_products"
                    @clickGoods="clickGoods">
      </goods-module>
    </div>

    <div class="store-list-index"
         v-if="good_products && good_products.length > 0">
      <div class="title flex align-center justify-between">
        <h2 class="main-title">销量排行</h2>
      </div>
      <goods-module module-name="goods2n"
                    goodsImg="goods_img"
                    goodsName="goods_name"
                    goodsPrice="goods_price"
                    delPrice="goods_marketprice"
                    goodsId="goods_id"
                    :list="good_products"
                    @clickGoods="clickGoods">
      </goods-module>
    </div>

    <div class="store-list-index"
         v-if="recently_products && recently_products.length > 0">
      <div class="title flex align-center justify-between">
        <h2 class="main-title">新品上架</h2>
      </div>
      <goods-module module-name="goods2n"
                    goodsImg="goods_img"
                    goodsName="goods_name"
                    goodsPrice="goods_price"
                    delPrice="goods_marketprice"
                    goodsId="goods_id"
                    :list="recently_products"
                    @clickGoods="clickGoods">
      </goods-module>
    </div>

    <!-- 加载到底了 -->
    <page-bottom :more="false"
                 :loading="false"></page-bottom>

  </div>
</template>

<script>
import Banner from '@/components/Banner'
import IndexNav from './IndexNav'
import PageBottom from '@/components/PageBottom'
import GoodsModule from '@/components/GoodsModule'
import { getIndexAdList, getProductList } from '@/api/homeIndex'

import { Toast } from 'vant'
export default {
  name: 'HomeIndex',
  data() {
    return {
      banners: [], // 轮播图
      promotion_ads: [], // 未知
      navs: [], // 导航键
      floor_ads: [], // 楼层广告
      hot_products: [], // 热门商品
      recently_products: [], // 新品上架
      good_products: [] // 销量排行
    }
  },
  components: {
    Banner,
    IndexNav,
    PageBottom,
    GoodsModule
  },
  created() {
    Toast.loading('加载中')
    this.renderAd()
    this.renderProduct()
  },
  mounted() {},
  methods: {
    /**
     * 获取广告列表
     */
    renderAd() {
      getIndexAdList()
        .then(res => {
          Object.assign(this, res.result)
          Toast.clear()
        })
        .catch(res => {
          Toast.clear()
        })
    },

    /**
     * 渲染推荐商品
     */
    renderProduct() {
      getProductList()
        .then(res => {
          Object.assign(this, res.result)
          Toast.clear()
        })
        .catch(res => {
          Toast.clear()
        })
    },

    /**
     * 点击商品跳转
     */
    clickGoods(goodsInfo) {
      this.$router.push({
        name: 'GoodsDetail',
        query: { goods_id: goodsInfo.goods_id }
      })
    }
  }
}
</script>

<style lang="scss">
.shop-index {
  // 广告位
  .img-ad {
    width: 100%;
    padding: 10px 0;
    img {
      width: 100%;
    }
  }

  .store-list-index {
    padding: 5px 10px;
    .title {
      margin: 20px 0 15px 0;
      .main-title {
        font-size: 17px;
        font-weight: bold;
      }
      .more-list {
        text-align: right;
        color: #666666;
        font-size: 14px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
</style>
